<template>
  <span class="inline-block w-full" @click="$emit('click', $event)">
    <a-select
      ref="userSelect"
      v-bind="$attrs"
      :placeholder="placeholder"
      :mode="(mode as SelectMode)"
      show-search
      :filter-option="filterOption"
      style="width: 100%"
      option-label-prop="label"
      @select="handleSelect"
      @change="changeSelect"
    >
      <a-select-option v-for="user in userList" :key="user.userId" :value="user.userId" :label="user.userName">
        <div class="flex flex-row items-center">
          <!-- <Icon type="icon-nanxing" class="text-2xl" /> -->
          <img src="/src/assets/user-logo.svg" class="w-10 h-10" />
          <div class="flex flex-col pl-4">
            <div class="flex flex-row items-center">
              <p class="font-semibold m-0">{{ user.userName || "--" }}</p>
              <a-tag :color="userState[user.state]?.color || 'warning'" size="small" class="ml-4">{{
                user?.stateName || "--"
              }}</a-tag>
            </div>
            <p class="m-0 mt-1 text-color-secondary">{{ user?.organizationName || "--" }}</p>
          </div>
        </div>
      </a-select-option>
    </a-select>
  </span>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { SelectProps } from "ant-design-vue";
import { getWorkOperatorList } from "/@/api/aiot/projectManage";
import { ProjectUser } from "/@/api/aiot/projectManage/models";
import Icon from "/@/components/Icon.vue";
import { useI18n } from "/@/locales/useI18n";
type SelectMode = SelectProps["mode"];
const emits = defineEmits(["click", "select", "change"]);
const { t } = useI18n();
const userSelect = ref();
const props = withDefaults(
  defineProps<{
    placeholder?: string;
    projectId?: string;
    mode?: SelectMode | "radio";
  }>(),
  {
    placeholder: "请点击选择",
    mode: "multiple",
  }
);
const userState = {
  busy: { name: "忙碌中", color: "#FD8358" },
  received: { name: "可接单", color: "#38CE7B" },
  holiday: { name: "休假中", color: "#4285F4" },
};
const userList = ref<ProjectUser[]>([]);
onMounted(async () => {
  userList.value = (await getWorkOperatorList({ projectId: props.projectId || "" })) || [];
});
function handleSelect(val) {
  let options: ProjectUser[] = [];
  if (props.mode === "radio") {
    options = userList.value.filter((item) => {
      return item.userId === val;
    });
  }
  emits("select", options);
}
function changeSelect(val) {
  let users = userList.value.filter((item) => {
    return val.includes(item.userId);
  });

  emits("change", val, users);
}
function filterOption(input: string, option: any) {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
</script>
